<template>
    <div style="width: 100%;" >
        <div style="width: 1000px; margin: 50px auto 0;">
            <el-table
                    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                    style="width: 100%">
                <el-table-column
                        label="序号"
                        prop="id"
                width="200">
                </el-table-column>
                <el-table-column
                        label="问题描述"
                        prop="name">
                </el-table-column>
                <el-table-column
                        align="right">
                    <template slot="header" slot-scope="scope">
                        <el-input
                                v-model="search"
                                size="mini"
                                placeholder="输入问题描述关键字搜索"/>
                    </template>
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">查看</el-button>
                        <el-button
                                size="mini"
                                :type="scope.row.type"
                                @click="handleDelete(scope.$index, scope.row)"
                        >{{scope.row.state}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block" style="float: right; margin-top: 20px">

                <el-pagination
                        layout="prev, pager, next"
                        :total="50">
                </el-pagination>
            </div>
        </div>


    </div>
</template>

<script>
    export default {
        name: "forum",
        data() {
            return {
                tableData: [{
                    id: '1',
                    name: '怎么学好前端',
                    type:'danger',
                    state: '去解决'
                }, {
                    id: '2',
                    name: '怎么学号算法',
                    type:'success',
                    state: '已解决'
                }, {
                    id: '1',
                    name: '怎么学好前端',
                    type:'danger',
                    state: '去解决'
                }, {
                    id: '2',
                    name: '怎么学号算法',
                    type:'success',
                    state: '已解决'
                }, {
                    id: '1',
                    name: '怎么学好前端',
                    type:'danger',
                    state: '去解决'
                }, {
                    id: '2',
                    name: '怎么学号算法',
                    type:'success',
                    state: '已解决'
                },

                ],
                search: ''
            }
            },
        methods: {
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            }
        },
    }
</script>

<style scoped>

</style>